<template>
    <router-link v-for="article of articles" :key="article.id" :to="{name:'detail',params:{id:article.id}}" class="article-item">{{article.title}}</router-link>
    <!-- 使用别名 -->
    <!-- <router-link v-for="article of articles" :key="article.id" :to="`/${article.id}.html`" class="article-item">{{article.title}}</router-link> -->
</template>

<script setup>
    import {ref} from "vue"
    import api from "@/api/api";
    const articles = ref(await api.all())
</script>

<style lang="scss" scoped>
    .article-item{
        background-color:#1abc9c;
        color: #fff;
        padding:10px;
        margin-bottom: 10px;
        display: block;
    }
</style>